import React, { useEffect } from "react";
import "./index.scss";
import moment from "moment";
import useReducer from "src/hooks/useReducer";
const weekOption = ["日", "一", "二", "三", "四", "五", "六"];
const Header = () => {
  const [state, dispatch] = useReducer({
    time: "",
    date: "",
    week: 0,
  });
  const { time, date, week } = state;
  const setTime = () => {
    const time = moment().format("HH:mm:ss");
    const date = moment().format("YYYY-MM-DD");
    const week = moment().day();
    dispatch({
      time,
      date,
      week,
    });
    setTimeout(setTime, 1000);
  };
  useEffect(() => {
    setTime();
  }, []);
  return (
    <div className="home-header">
      <div className="header-container">
        <span>Welcome</span>
        <div className="h_title">编程客栈</div>

        <div className="h-right">
          <span>作者：谢华志</span>
          <div style={{display:'flex',flexDirection:'column'}}>
            <span>{date}</span>
            <span>星期{weekOption[week]}</span>
            <span>{time}</span>
          </div>
        </div>
      </div>
    </div>
  );
};
export default Header;
